Chart.js — Axis Labels and Instance Methods

We can make creating charts on a web page easy with Chart.js.

In this article, we’ll look at how to create charts with Chart.js.

Labeling Axes

The labeling axis tells the viewer what they’re viewing.

For example, we can write:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'First dataset',
      data: [0, 20, 40, 50]
    }],
    labels: ['January', 'February', 'March', 'April']
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          callback(value, index, values) {
            return `$${value}`;
          }
        }
      }]
    }
  }
});

We put a dollar before the number with the callback .

value has the y-axis value.

Styling

We can style an axis with various options.

For instance, we can change the color, border, ticks, and more of the grid lines.

We can do that by changing the gridLines property.

To do that, we can write:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'First dataset',
      data: [0, 20, 40, 50]
    }],
    labels: ['January', 'February', 'March', 'April']
  },
  options: {
    scales: {
      yAxes: [{
        gridLines: {
          color: 'green'
        }
      }]
    }
  }
});

We change the gridLine color to 'green' .

There are also other options like the zero line width, zero line color, border dash, and more.

Tick Configuration

We can also change the tick configuration.

To do this, we can change the ticks property.

For example, we can write:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'First dataset',
      data: [0, 20, 40, 50]
    }],
    labels: ['January', 'February', 'March', 'April']
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          fontColor: 'green'
        }
      }]
    }
  }
});

We change the y-axis ticks with the font color to 'green' to make the y-axis labels green.

Other options include font style, line weight, padding, and more.

There’re also options for minor and major ticks.

For example, we can write:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'First dataset',
      data: [0, 20, 40, 50]
    }],
    labels: ['January', 'February', 'March', 'April']
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          minor: {
            fontColor: 'green'
          },
          major: {
            fontColor: 'red'
          }
        }
      }]
    }
  }
});

to change the minor and major tick options.

The full list of options is at https://www.chartjs.org/docs/latest/axes/styling.html.

Chart Prototype Methods

Each Chart instance has its own instance methods.

They include:

• destroy — destroys the chart
• reset — resets the chart to the state before the initial animation.
• render(config) — render a config with various options.
• stop — stop any current animation loop
• resize — resize a chart’s canvas element
• clear — clear the chart canvas
• toBase64Image — returns the base64 encoded string of the chart in its current state
• generateLegend — returns an HTML string of a legend for the chart
• getElementAtEvent(e) — get element based on the event object.
• getElementsAtEvent(e) — get elements based on the event object.
• getDatasetAtEvent(e) — get element under the went point.
• getDatasetMeta(index) — get a dataset that matches the current index and returns the metadata.

Conclusion

We can call instance methods on a chart.

Also, the labels can be changed the way we want.